<template>
	<Modal v-model="data" :title="title" @on-cancel="cancel" :width="modalWidth">
		<Form ref="form" :model="form" :label-width="70" :rules="userFormValidate">
			<Row>
				<Col span="12">
					<Form-item label="行数" prop="row">
						<InputNumber max="12" min="1" v-model.trim="form.row" type="number" :autosize="true" />
					</Form-item>
				</Col>
				<Col span="12">
					<Form-item label="列数" prop="col">
						<InputNumber v-model.trim="form.col" max="12" min="1" type="number" :autosize="true" />
					</Form-item>
				</Col>
			</Row>
			<Row>
				<Col span="12">
					<Row>
						<Col :span="18">
							<Form-item label="行高" prop="height">
								<InputNumber v-model.trim="form.height" type="number" max="10000" min="0" :autosize="true" />
							</Form-item>
						</Col>
						<Col :span="6">
							<div style="padding:0 0 0 6px">
								<Select v-model="form.rowCompany" style="width:100%:height:100%">
									<Option v-for="item in cityList" :value="item" :key="item">{{ item }}</Option>
								</Select>
							</div>
						</Col>
					</Row>
				</Col>
				<Col span="12">
					<Row>
						<Col :span="18">
							<Form-item label="列宽" prop="width">
								<InputNumber v-model.trim="form.width" max="10000" min="0" type="number" :autosize="true" />
							</Form-item>
						</Col>
						<Col :span="6">
							<div style="padding:0 0 0 6px">
								<Select v-model="form.colCompany" style="width:100%:height:100%">
									<Option v-for="item in cityList" :value="item" :key="item">{{ item }}</Option>
								</Select>
							</div>
						</Col>
					</Row>
				</Col>
			</Row>
		</Form>
		<div slot="footer">
			<Button @click="cancel">取消</Button>
			<Button @click="ok" type="primary">确定</Button>
		</div>
	</Modal>
</template>

<script>
export default {
	name: 'ui-design-aplit1',
	components: {},
	props: {
		// 对话框标题
		title: {
			type: String,
			default: '页面分割',
		},
		// 对话框显示隐藏
		value: {
			type: Boolean,
			default: false,
		},
		// 对话框宽度，高度自适应
		modalWidth: {
			type: Number,
			default: '520',
		},
	},
	data() {
		let validateNumer = (rule, value, callback) => {
			let re = /^[0-9]*[1-9][0-9]*$/
			if (!re.test(value)) {
				callback(new Error('请输入正整数有效值 !'))
			} else {
				callback()
			}
		}
		let validateNum = (rule, value, callback) => {
			let re = /^(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*))$/
			if (!re.test(value)) {
				callback(new Error('请输入正数有效值!'))
			} else {
				callback()
			}
		}
		return {
			data: this.value,
			form: {
				row: 0,
				col: 0,
				width: 0,
				height: 0,
				rowCompany: '%',
				colCompany: '%',
			},
			cityList: ['%'],
			userFormValidate: {
				row: [
					{
						required: true,
						validator: validateNumer,
						trigger: 'blur',
					},
				],
				col: [
					{
						required: true,
						validator: validateNumer,
						trigger: 'blur',
					},
				],
				height: [
					{ required: true, validator: validateNum, trigger: 'blur' },
				],
				width: [
					{ required: true, validator: validateNum, trigger: 'blur' },
				],
			},
		}
	},
	watch: {
		value(val) {
			console.log(val)
			this.data = val
		},
	},
	methods: {
		ok() {
			this.handleSubmit('form')
		},
		cancel() {
			this.$emit('changeVal', { modal: false, button: false, form: null })
			this.handleReset('form')
		},
		handleSubmit(name) {
			this.$refs[name].validate((valid) => {
				if (valid) {
					this.$Modal.confirm({
						title: '请确认',
						content: '之前分割的内容将被替换，你确认要分割页面吗?',
						onOk: () => {
							let form = []
							let that = this
							for (let i = 0; i < this.form.row; i++) {
								let row = {
									name: 'row',
									height:
										this.form.height + this.form.rowCompany,
									width: '100%',
									content: '',
									children: [
										...(function () {
											let data = []
											for (
												let i = 0;
												i <that.form.col;
												i++
											) {
												let col = {
													name: 'col',
													width:
														that.form.width +
														that.form.colCompany,
													height: '100%',
													content: '',
												}
												data.push(col)
                      }
                      return data
										})(),
									],
								}
								form.push(row)
							}
							this.$emit('changeVal', {
								modal: false,
								button: true,
								form: form,
							})
						},
					})
				} else {
					this.$Message.error('校验失败，请正确填写!')
				}
			})
		},
		handleReset(name) {
			this.$refs[name].resetFields()
		},
	},
}
</script>
<style lang="less" scoped>
.split-atrr {
	width: 100%;
	height: 100%;
}
&/deep/ .ivu-input-number {
	width: 100%;
}
</style>